<template>
  <div class="home-box">
    <div class="header">
      <el-avatar
        size="100"
        fit="fill"
        src="https://img2.baidu.com/it/u=3233367043,2125797449&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      />
      <ReTypeit
        :className="'type-it0'"
        :values="[greetings]"
        :cursor="false"
        :speed="80"
      />
    </div>
    <div class="home-body">
      <img src="@/assets/images/welcome.png" alt="" srcset="" />
    </div>
  </div>
</template>

<script lang="ts">
import { ref, computed } from "vue";
import ReTypeit from "@/components/ReTypeit";
export default {
  components: {
    ReTypeit,
  },
  setup() {
    const date: Date = new Date();
    const greetings = computed(() => {
      if (date.getHours() >= 0 && date.getHours() < 12) {
        return "上午阳光明媚，祝你薪水翻倍🌞！";
      } else if (date.getHours() >= 12 && date.getHours() < 18) {
        return "下午小风娇好，愿你青春不老😃！";
      } else {
        return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
      }
    });
    return {
      greetings,
    };
  },

  mounted() {
    console.log(this.count); // 0
  },
};
</script>

<style lang="scss" scoped>
.home-box {
  .header {
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    .type-it0 {
      padding-left: 10px;
    }
  }
  .home-body {
    text-align: center;
    img {
      width: 70%;
      max-width: 1200px;
      margin-bottom: 20px;
    }
  }
}
</style>
